<template>
  <div class="container">
    <van-row type="flex" justify="space-around" align="center">
      <van-col style="width: 100%">
        <van-search
          v-model="filter_name"
          placeholder="请输入搜索内容"
          clearable
          shape="round"
          @search="init"
        ></van-search>
      </van-col>
      <van-col>
        <div class="publish">
          <span @click="publish">+发布</span>
        </div>
      </van-col>
    </van-row>
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="item in list" :key="item.id" :title="item">
          <van-row style="padding-top: 15px" @click="itemClick(item.id)">
            <van-col>
              <img
                :src="getSrc(item)"
                style="object-fit: cover"
                width="100px"
                height="100px"
              />
            </van-col>
            <van-col
              style="
                position: relative;
                height: 100px;
                width: calc(100% - 100px);
                padding-left: 10px;
              "
            >
              <img
                v-if="item.isCertificate"
                :src="logo_certificate"
                width="40px"
                style="position: absolute; right: -10px; top: 0px; z-index: 100"
              />
              <div>
                <van-cell
                  :title="item.title"
                  label-class="item"
                  title-class="title"
                  :label="item.detail"
                ></van-cell>
              </div>
              <div style="position: absolute; bottom: 0; width: 100%">
                <van-row type="flex" align="bottom">
                  <span
                    style="color: red"
                    :style="
                      item.price == 0 || item.price == null
                        ? 'font-size:12px;'
                        : ''
                    "
                    >￥{{
                      item.price == 0 || item.price == null
                        ? '面议'
                        : item.price
                    }}</span
                  >
                </van-row>
                <van-row
                  type="flex"
                  align="center"
                  justify="space-between"
                  style="height: 16px; margin-left: 1px"
                >
                  <van-col>
                    <span class="cell-span">{{
                      item.areaName || '地区未知'
                    }}</span>
                  </van-col>
                  <van-col style="font-size: 12px">
                    <div style="height: 100%">
                      <span
                        class="cell-span"
                        style="float: left; line-height: 12px"
                      >
                        <van-icon
                          name="star"
                          color="#EE3F00"
                          style="float: left; font-size: 12px"
                          v-show="
                            item.newLevel >= 0 && item.newLevel < 3
                              ? true
                              : false
                          "
                        ></van-icon>
                        &#8197;{{ getChosedLevel(item.newLevel) }}
                      </span>
                    </div>
                  </van-col>
                  <van-col>
                    <span class="cell-span">{{
                      item.updateTime.substring(0, 10)
                    }}</span>
                  </van-col>
                </van-row>
              </div>
            </van-col>
          </van-row>
          <van-divider
            :style="{
              color: 'rgba(187, 187, 187, 0.38)',
              borderColor: 'rgba(187, 187, 187, 0.38)',
              padding: '15px 16px 0px 16px',
            }"
          ></van-divider>
          <van-row
            type="flex"
            justify="space-between"
            style="height: 36px"
            align="center"
          >
            <van-col style="padding-left: 10px">
              <span style="font-size: 12px; color: #ee3f00">{{
                status[item.status]
              }}</span>
            </van-col>
            <van-col>
              <div style="padding-right: 4px">
                <span v-if="item.user.name">{{ item.user.name }}</span>
                <span style="margin-left: 10px"></span>
                <span
                  v-if="item.cacheTel"
                  class="corner-span"
                  @click="callUser(item.cacheTel)"
                  >{{ item.cacheTel }}</span
                >
              </div>
            </van-col>
          </van-row>
          <div
            style="height: 12px; width: 100%; background: #f0f1f4"
            v-show="userId != -1"
          />
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import {
  Search,
  Row,
  Col,
  DropdownMenu,
  DropdownItem,
  List,
  Uploader,
  Popup,
  Area,
  Divider,
} from 'vant';
import {
  listClientUsed,
  updateUsedStatus,
  deleteUsedRecord,
  dicItems,
} from '@/api/api';
import areaList from '@/views/user/module-address-edit/area_all.json';
import logo_default from '@/assets/images/logo.jpg';
import scrollFixed from '@/mixin/scroll-fixed';
import logo_certificate from '@/assets/images/certificate.png';

export default {
  mixins: [scrollFixed],
  data() {
    return {
      userId: -1,
      areaList: areaList,
      address: '全国地区',
      list: [],
      loading: false,
      finished: false,
      logo_default: logo_default,
      logo_certificate: logo_certificate,
      page: 0,
      limit: 10,
      sale: false,
      filter_name: '',
      area_code: '',
      in_class: -1,
      chosed_level: -1,
      classoptions: [],
      leveloptions: [],
      status: ['已下架', '待审核', '审核不通过', '已上线'],
      classId: 'USED.PUBLISH.CLASS',
      newLevelId: 'USED.PUBLISH.NEW.LEVEL',
    };
  },

  watch: {
    $route(to, from) {
      if (
        this.$route.query.userId != null &&
        this.$route.query.userId != undefined &&
        this.$route.query.userId != ''
      ) {
        this.userId = this.$route.query.userId;
      }
      this.init();
    },
  },

  created() {
    this.initArea();
    this.initClassOption();
    this.initNewLevelOption();
    if (
      this.$route.query.userId != null &&
      this.$route.query.userId != undefined &&
      this.$route.query.userId != ''
    ) {
      this.userId = this.$route.query.userId;
      //this.area_code = '';
    }
  },

  methods: {
    callUser(tel) {
      window.location.href = 'tel:' + tel;
    },
    initArea() {
      let area = this.$store.getters.getArea;
      if (area.code != null) {
        this.area_code = area.code;
        this.address = area.city;
      }
    },
    //0 下架     1待审核    2审核不通过   3下架
    getNameByStatus(status, type) {
      if (type == 'edit') {
        if (status == 1) {
          //待审核
          return '取消审核';
        } else {
          //审核不通过
          return '编辑';
        }
      } else {
        if (status == 0) {
          //下架
          return '上架';
        } else {
          //已上架
          return '下架';
        }
      }
    },
    getChosedLevel(level_value) {
      for (let i in this.leveloptions) {
        if (level_value == this.leveloptions[i].value) {
          if (level_value == -1) {
            return '';
          } else {
            return this.leveloptions[i].text;
          }
        }
      }
    },
    initClassOption() {
      dicItems({ groupId: this.classId })
        .then((res) => {
          let list = res.data.data.list;
          for (let i in list) {
            let opiton = {
              text: list[i].itemName,
              value: parseInt(list[i].itemValue),
            };
            this.classoptions.push(opiton);
          }
        })
        .catch(() => {});
    },
    initNewLevelOption() {
      dicItems({ groupId: this.newLevelId })
        .then((res) => {
          let list = res.data.data.list;
          for (let i in list) {
            let opiton = {
              text: list[i].itemName,
              value: parseInt(list[i].itemValue),
            };
            this.leveloptions.push(opiton);
          }
        })
        .catch(() => {});
    },
    publish() {
      this.$router.push('/info/used-publish/-1');
    },
    itemClick(id) {
      this.$router.push(`/info/client-used-detail/${id}`);
    },
    getSrc(item) {
      let image = logo_default;
      if (item.images.length != 0) {
        image = item.images[0];
      }
      return image;
    },
    addConfirm(e) {
      if (e[0].code == '100000') {
        this.area_code = '';
        this.address = '全国地区';
      } else {
        this.area_code = e[1].code;
        this.address = e[1].name;
      }
      this.show = false;
      this.changeItem();
      this.$refs.area_item.toggle();
    },
    hideAreaItem() {
      this.$refs.area_item.toggle();
    },
    changeItem() {
      this.page = 0;
      this.list = [];
      this.onLoad();
    },
    init() {
      this.page = 0;
      this.list = [];
      this.onLoad();
    },

    onLoad() {
      if (this.userId == -1) {
        this.loading = false;
        this.finished = true;
        return;
      }
      //alert(this.list.length);
      if (this.page != 0 && this.list.length < 10) {
        this.page = 0;
        this.list = [];
      }
      this.page++;
      listClientUsed({
        page: this.page,
        limit: this.limit,
        filtername: this.filter_name,
        areaCode: this.area_code,
        inClass: this.in_class,
        newLevel: this.chosed_level,
        usedId: -1,
        userId: this.userId,
        sort: 'update_time',
      })
        .then((res) => {
          this.list.push(...res.data.data.list);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch((e) => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },
  },
  components: {
    [Search.name]: Search,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Divider.name]: Divider,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
  },
};
</script>

<style lang="scss" scoped>
/* .van-search{
  background: rgb(255, 255, 255);
    margin-bottom: -10px;
} */
/deep/ .van-picker__cancel,
/deep/ .van-picker__confirm {
  color: #ee3f00;
}
.select_area /deep/ .van-picker__toolbar {
  width: 100%;
  position: absolute;
  bottom: -44px;
}
.select_area /deep/ .van-picker__columns {
  margin-bottom: 44px;
}
.van-cell >>> .van-field__control[type='search'] {
  height: 30px;
}
.corner-span {
  width: 40px;
  height: 20px;
  // background-color: #EE3F00;
  border: 1px solid #ee3f00;
  border-radius: 5px;
  font-size: 12px;
  padding: 2px 8px;
}
.spanafter {
  position: relative;
  padding: 0 8px;
  line-height: 18px;
}
.spanafter::after {
  position: absolute;
  top: 50%;
  right: -4px;
  margin-top: -5px;
  border: 3px solid;
  border-color: transparent transparent currentColor currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: '';
}
.address {
  text-align: center;
  height: 36px;
  line-height: 36px;
  color: #323233;
  font-size: 15px;
}

.container {
  background-color: white;
  .van-row {
    padding: 0px 16px;
    .van-row {
      padding: 0px;
    }
  }
}

.van-divider {
  margin: 0px;
  padding-top: 15px;
}

.van-search {
  padding: 0px;
}

.title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: -4px;
}

.publish {
  line-height: 40px;
  width: 54px;
  text-align: end;
}

.publish span {
  width: 60px;
  height: 30px;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 4px;
  font-size: 13px;
  padding: 5px 6px;
  color: white;
}

.van-cell {
  padding: 0px;
}

.cell-span {
  color: #969799;
  font-size: 12px;
}
</style>